<template>
  <table-header>
    <template #text>
      筛选结果
    </template>
    <template #right>
      <u-icon type="refresh-right" class="tb-ic" />
      <u-icon type="column-height" class="tb-ic" />
      <!-- <u-icon type="set" class="tb-ic" /> -->
      <columns-setting
        :source="columns"
        @change="handleSettingChange"
      />
    </template>
  </table-header>

  <u-table
    :data="datas"
    :columns="tableColumns"
    show-pagination
    stripe
    row-key="id"
    :pagination="{
      showTotal: true,
      showSizer: true,
      total: datas.length
    }"
  >
    <template #name="{ row }">
      <u-button type="text" @click="handleClick">
        {{ row.celve }}
      </u-button>
    </template>
    <template #action="{ row }">
      <u-tooltip title="复制">
        <u-button
          type="text"
          icon="view-detail"
          class="m-r-1 action-button"
          @click="handleView(row)"
        />
      </u-tooltip>
    </template>
  </u-table>
</template>

<script lang="ts">
import getAllCompony from '@/mock/atlas'
import tableHeader from '@C/tableHeader.vue'
import { ColumnsSetting } from '@bairong/vix'
import { ref } from 'vue'

export default {
  components: {
    tableHeader,
    ColumnsSetting
  },
  setup() {
    const columns = ref([
      { key: 'xuhao', title: '序号', width: 100 },
      {
        key: 'celve', title: '策略名称', ellipsis: true, minWidth: 150, slot: 'name'
      },
      {
        key: 'liang', title: '点击量', sortable: true, width: 100
      },
      {
        key: 'liang', title: '使用量', sortable: true, width: 100
      },
      {
        key: 'lv', title: '执行成功率', sortable: true, width: 120
      },
      {
        key: 'du', title: '执行提升度', sortable: true, width: 130
      },
      { key: 'mubiao', title: '策略目标', width: 100 },
      { key: 'kequn', title: '特色客群', minWidth: 110 },
      {
        key: 'dengji', title: '客户等级', ellipsis: true, minWidth: 110
      },
      {
        key: 'changjing', title: '策略场景', ellipsis: true, minWidth: 110
      },
      {
        key: 'action', title: '操作', width: 100, slot: 'action', fixed: 'right'
      }
    ])
    const datas = getAllCompony().data
    const tableColumns = ref(columns.value)
    const handleSettingChange = (columns: any) => {
      tableColumns.value = columns
    }
    const handleView = (row: any) => {
      console.log(123, row)
    }
    const handleClick = (row: any) => {
      console.log(546, row)
    }

    return {
      datas,
      columns,
      handleView,
      handleClick,
      tableColumns,
      handleSettingChange
    }
  }
}
</script>

<style>
</style>
